

<template>
  <div class="login-content">
    <!-- <div class="logo">
      <img src="../../../static/img/login_logo.png" alt="" />
    </div>
    <div class="login-right">
      <div class="input-group">
        <h1>用户登录</h1>
        <div class="vercode-area">
          <Input
            v-model="username"
            autofocus
            :maxlength="20"
            placeholder="请输入账号/手机号"
          />
          <Button
            v-on:click.stop="getMobile"
            type="primary"
            style="margin-left: 10px"
            :disabled="!username || disabled"
            >{{ btnText }}</Button
          >
        </div>
        <Input
          v-model="password"
          type="password"
          :maxlength="20"
          icon="locked"
          placeholder="请输入密码"
        />
        <div class="vercode-area">
          <Input
            v-model="vercode"
            @on-enter="submit"
            placeholder="请输入验证码"
          />
        </div>
        <Button type="success" @click="submit">登录</Button>

        <div class="other-login">
          <span class="other-login-item" @click="skipOtherTypeLogin">
            粤政易登录
          </span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { domain, domain2 } from 'global/setting';
import { ajaxPost } from 'global/axios';
import { handleLogin } from './common.js';
import { successNotice, errorNotice } from 'common/js/dom';
import storage from 'good-storage';
import md5 from 'md5';
import axios from 'axios'

export default {
  data () {
    return {
      disabled: false, // 发送按钮
      url: '/sys/userinfo/loginbypcaptcha',
      getMobileUrl: '/sys/userinfo/uandp', // 获取手机号
      getCodeUrl: '/sys/userinfo/sendpcaptcha', // 获取手机验证码
      username: '',
      password: '',
      vercode: '',
      urlCode: '',
      domain2: '',
      timer: null,
      btnText: '发送',
      mobile: '', // 手机号
      realname: '' //
    };
  },
  methods: {
    changeImg () {
      this.urlCode = `${domain}/vercode/get?${Math.random()}`;
    },
    // 获取手机号
    getMobile () {
      let params = {
        data: {
          uorp: this.username,
        },
        url: this.getMobileUrl,
        success: res => {
          if (res.data.code === '0000') {
            this.mobile = res.data.result.mobile;
            this.realname = res.data.result.username;
            this.getCode();
          } else {
            this.$Notice.warning({
              desc: res.data.message
            });
            this.disabled = false;
          }
        },
      };
      this.disabled = true;
      ajaxPost(params);
    },
    // 获取验证码
    getCode () {
      let params = {
        data: {
          mobile: this.mobile,
        },
        url: this.getCodeUrl,
        success: res => {
          if (res.data.code === '0000') {
            successNotice(res.data.message);
            let time = res.data.result;
            let timer = setInterval(() => {
              if (time == 0) {
                // 秒数为0，清除定时器并复原按钮
                clearInterval(timer);
                this.disabled = false;
                this.btnText = '发送';
                time = second;
              } else {
                this.btnText = time + '秒重新发送';
                time--;
              }
            }, 1000);
          } else {
            this.$Notice.warning({
              desc: res.data.message
            });
            this.disabled = false;
          }
        },
      };
      ajaxPost(params);
    },
    // 登录
    // submit () {
    //   let reg =
    //     /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[.~!?@#\-\+\=\_$%^&*])[\da-zA-Z~.!?@#\-\+\=\_$%^&*]{8,16}$/;
    //   if (this.username === '') {
    //     this.$Notice.warning({
    //       title: '请输入账号名',
    //     });
    //     return;
    //   }
    //   if (this.password === '') {
    //     this.$Notice.warning({
    //       title: '请输入账号密码',
    //     });
    //     return;
    //   }
    //   if (this.vercode === '') {
    //     this.$Notice.warning({
    //       title: '请输入验证码',
    //     });
    //     return;
    //   }
    //   if (!reg.test(this.password)) {
    //     this.$Message.warning(
    //       '你的密码强度太低, 请拨打153-3832-0508联系管理员重置密码!'
    //     );
    //     return;
    //   }

    //   let strongPwd = md5(this.password);

    //   let params = {
    //     data: {
    //       username: this.realname,
    //       password: strongPwd,
    //       pcaptcha: this.vercode,
    //       mobile: this.mobile
    //     },
    //     url: this.url,
    //     token: storage.session.get('token'),
    //     success: res => {
    //       if (res.data.code === '0000') {
    //         let initPwd =
    //           strongPwd === '5b64b2132689d27f42ec44a5fc64d8ca' ? true : false; // 是否初始密码
    //         let msg = initPwd ? res.data.message : '登录成功';

    //         this.$Message.info({
    //           content: msg,
    //           duration: 1,
    //           onClose: () => {
    //             handleLogin({ that: this, res, initPwd })
    //           },
    //         });
    //       } else if (res.data.code === '0002') {
    //         this.$Notice.warning({
    //           // desc: '验证码错误,请点击验证码刷新',
    //           desc: res.data.message
    //         });
    //       } else {
    //         this.$Notice.warning({
    //           // desc: `登录失败, ${res.data.message}`,
    //           desc: res.data.message
    //         });
    //       }
    //     },
    //   };
    //   ajaxPost(params);
    // },
    // 登录
    submit () {
      // 从URL中获取access_token参数
      const { access_token } = this.$route.query

      if (!access_token) {
        return
      }

      const url = `http://19.130.169.133/shuihuanjing/auth/getmenuuser`

      axios.post(url, {}, {
        headers: {
          token: access_token,
        },
      }).then(res => {
        if (res.data.code === '0000') {
          const data = {
            "username": res.data.data.user.user.loginName,
            "zhsl_token": access_token
          }

          ajaxPost({
            data,
            url: '/sys/userinfo/zhsllogin',
            success: res => {
              if (res.data.code === '0000') {
                handleLogin({ that: this, res })
              } else {
                alert('没有访问权限，请联系管理员')
              }
            }
          })
        }
      })
    },
    // 粤证易登录
    skipOtherTypeLogin () {
      let { origin } = window.location
      let backurl = `${origin}/hzSystem/oauth-login`
      window.location.href = `https://xtbg.gdzwfw.gov.cn/zwrz/rz/sso/oauth/authorize?response_type=code&scope=all&client_id=zwrz_fshzzgl&redirect_uri=${encodeURIComponent(backurl)}`
    }
  },
  mounted () {
    // this.changeImg();
    this.submit()
  },
};
</script>

<!--登陆页面-->
<style lang="less" scope>
.login-content {
  // background: url(./img/login1.jpg) no-repeat;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: 100%;

  .login-right {
    position: absolute;
    right: 5%;
    top: 35%;

    .logo {
      width: 37vw;
      padding-bottom: 2vh;
      text-align: center;

      img {
        width: 100%;
        max-width: 525px;
      }
    }
    .input-group {
      width: 420px;
      height: 368px;
      padding: 3vh 0;
      text-align: center;
      background: white;

      h1 {
        padding-bottom: 20px;
        color: rgb(50, 166, 255);
        font-size: 24px;
      }

      > .ivu-input-wrapper {
        width: 65%;
        height: 40px;
        margin-bottom: 30px;

        .ivu-input-inner-container {
          height: 100%;
        }

        .ivu-input {
          height: 100%;
        }
        .ivu-icon {
          height: 100%;
          line-height: 40px;
          font-size: 23px;
        }
      }

      .vercode-area {
        width: 65%;
        margin: 0 auto 30px;
        display: flex;
        align-items: center;
        img {
          width: 90px;
          height: 30px;
          margin-left: 20px;
          cursor: pointer;
        }
      }

      > .ivu-btn {
        width: 65%;
        height: 50px;
        font-size: 23px;
        background: linear-gradient(#4da1ff, #0069df);
      }
    }
  }
  .other-login {
    margin-top: 18px;
    text-align: left;
    margin-left: 78px;

    > .other-login-item {
      color: #32a6ff;
      cursor: pointer;
      opacity: 0.9;
      transition: all 0.2s ease;
      &:hover {
        opacity: 1;
      }
    }
  }
}
</style>
